<template>
  <div class="tabs-notice bgc-white">
    <el-tabs v-model="activeName" class="tabs">
      <el-tab-pane label="平台公告" name="notice">
        <ul v-if="noticeData.length > 0">
          <li v-for="(item, index) in noticeData" :key="index" class="_line-1 cursor-p"
            @click="handleNoticeDetail(item)">{{ item.contentName }}</li>
          <li class="_line-1 cursor-p" style="text-align: right;" @click="handleNoticeList(3)">查看更多 >></li>
        </ul>
        <!-- 暂无数据展示 -->
        <div v-if="noticeData.length === 0" class="font-12 font-color-9 text-align-c pad-t-30">暂无数据</div>
      </el-tab-pane>
      <el-tab-pane label="平台规则" name="rule">
        <ul v-if="ruleData.length > 0">
          <li v-for="(item, index) in ruleData" :key="index" class="_line-1 cursor-p" @click="handleNoticeDetail(item)">
            {{ item.contentName }}
          </li>
          <li class="_line-1 cursor-p" style="text-align: right;" @click="handleNoticeList(4)">查看更多 >></li>
        </ul>
        <!-- 暂无数据展示 -->
        <div v-if="ruleData.length === 0" class="font-12 font-color-9 text-align-c pad-t-30">暂无数据</div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    ref,
    onMounted,
    inject
  } from 'vue'
  import {
    useRouter
  } from 'vue-router'
  import {
    jumpPage
  } from '@/utils/jumpPageUtils'
  export default defineComponent({
    name: 'NoticeSlider',
    setup() {
      const router = useRouter()
      const activeName = ref('notice')
      let noticeData = inject('fixedComponentsContentInfoPlatNoticeList')
      let ruleData = inject('fixedComponentsContentInfoPlatRuleList')

      onMounted(() => {})
      const handleNoticeDetail = (item: any) => {
        jumpPage(router, 1, 1, 2101, '?contentInfoId=' + item.contentInfoId, 1)
      }
      const handleNoticeList = (contentType: number) => {

        jumpPage(router, 1, 1, 2100, '?contentType=' + contentType, 1)
      }
      return {
        activeName,
        noticeData,
        ruleData,
        handleNoticeList,
        handleNoticeDetail
      }
    }
  })
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;

  .tabs-notice {
    height: 253px;
    overflow: hidden;

    ::v-deep(.tabs) {
      .el-tabs__nav {
        width: 100%;
      }

      .el-tabs__header {
        margin: 0 0 4px 0;
      }

      .el-tabs__item {
        width: 50%;
        padding: 0;
        text-align: center;
        color: #999999;
        position: relative;
        height: 44px;
        line-height: 44px;
      }

      .el-tabs__active-bar {
        background-color: #182245;
        // width: 20px!important;
        display: none;
      }

      .el-tabs__item.is-active {
        color: #182245;

        &::after {
          content: '';
          display: inline-block;
          position: absolute;
          left: 50%;
          bottom: 9px;
          margin-left: -10px;
          width: 20px;
          height: 2px;
          background-color: #182245;
        }
      }

      .el-tabs__nav-wrap::after {
        display: none;
      }
    }

    ul {
      margin: 0;
      padding: 0;

      li {
        margin: 0;
        padding: 0 23px 0 20px;
        height: 28px;
        line-height: 28px;
        list-style: none;
      }
    }
  }

  ._line-1 {
    /* line-height: 1.4; */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-word;
  }
</style>
